<template>
  <div class="content-box padding-left-right-10 padding-top-bottom-20" :class="hasBg ? 'bg-f8' : ''">
    <div class="flex justify-between" :class="titlePointer ? 'cursor-pointer' : ''" @click="getInfo">
      <div class="flex left-box align-center">
        <div class="tag-blue-box padding-left-right-5 padding-top-bottom-3 font-size-12 t-center">{{ isLeader ? '负责人' : '发起人' }}</div>
        <div class="padding-left-right-20 color-666666">{{ (model.organizationNames && model.organizationNames[0]) || '' }}</div>
        <div class="color-666666">{{ model.createUserName }}</div>
      </div>
      <div class="flex right-box">
        <!-- 1-新增 2-更新
        工作追踪-领导 || 项目事件-员工  creatorProgress
        工作追踪-员工 || 项目事件-领导  processorProgress -->
        <template v-if="isLeader">
          <div v-if="model.creatorProgress == 2" class="color-3384FE padding-right-20">有更新</div>
          <div v-if="model.status == 2" class="color-999999 padding-right-20">草稿</div>
        </template>
        <template v-else>
          <div v-if="model.processorProgress == 2" class="color-3384FE padding-right-20">有更新</div>
          <div v-if="model.processorProgress == 1" class="color-3384FE padding-right-20">新增</div>
        </template>
        <div>
          <span>更新时间：</span>
          <span class="update-time">{{ model.updateTime | formatDateTime }}</span>
        </div>
        <div>
          <span>剩余时间：</span>
          <span v-if="model.remainingDays && model.remainingDays > 0" class="remaining-time">{{ model.remainingDays }}天</span>
          <span v-if="model.remainingDays && model.remainingDays < 0" class="color-red remaining-time">逾期{{ model.remainingDays }}天</span>
          <span v-if="!model.remainingDays">--</span>
        </div>
      </div>
    </div>
    <div class="font-size-16 margin-top-10" :class="titlePointer ? 'cursor-pointer three-line-ellipsis' : ''" @click="getInfo">{{ model.description }}</div>
    <div class="full-box" v-if="isShowImg">
      <div class="img-box" v-for="item in model.imageAttachmentList || []" :key="item.primaryKey">
        <el-image class="img" :preview-src-list="model.imgList" :src="item.fileUrl" fit="cover"></el-image>
      </div>
    </div>
    <div class="full-box margin-top-10" v-if="isShowImg">
      <el-link v-for="item in model.fileAttachmentList || []" :key="item.primaryKey" type="primary" class="margin-right-20" @click="downLoadUrl(item.fileUrl)">
        <i class="icon el-icon-paperclip"></i>
        <span>{{ item.fileTitle }}</span>
      </el-link>
    </div>
  </div>
</template>
<script>
  import { uploadLoad } from '@/common/js/utils';
  export default {
    props: {
      hasBg: {
        type: Boolean,
        default: false,
      },

      isLeader: {
        type: Boolean,
        default: false,
      },

      isShowImg: {
        type: Boolean,
        default: true,
      },

      titlePointer: {
        type: Boolean,
        default: false,
      },

      model: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },

    data() {
      return {};
    },

    mounted() {},

    methods: {
      getInfo() {
        // return
        if (this.model.bizType == 'todo') {
          if (this.model.pcDetailUrl) {
            let url = window.location.origin + this.model.pcDetailUrl;
            window.open(url);
          }
        } else {
          this.$emit('getInfo', this.model.primaryKey, this.model);
        }
      },
      downLoadUrl(url) {
        uploadLoad(url);
      },
    },
  };
</script>
<style lang="scss" scoped>
  .tag-orange-box {
    background: rgba(247, 145, 0, 0.1);
    border-radius: 3px;
    color: #f79100;
  }
  .tag-blue-box {
    background: rgba(51, 132, 254, 0.1);
    border-radius: 3px;
    color: #3384fe;
  }
  .content-box {
    overflow: hidden;
  }
  .bg-f8 {
    background: #f8f8f8;
  }
  .img-box {
    width: 80px;
    height: 80px;
    margin-top: 15px;
    margin-right: 15px;
    float: left;
    .img {
      width: 80px;
      height: 80px;
    }
  }
  .remaining-time {
    width: 70px;
    display: inline-block;
  }
  .update-time {
    width: 140px;
    display: inline-block;
  }
  .status-box {
    width: 140px;
    display: inline-block;
  }
</style>
